<template>
  <div>
    <!--申请上会弹出框  -->
    <CommonDialog
      title="任务申请上会"
      width="75%"
      v-bind:dialogVisible="applicationDialogVisible"
      @on-change-dialogVisible="applicationChange"
      class="application"
      top="5vh"
    >
      <template #body>
        <el-form
          class="applicationForm"
          :model="applicationForm"
          :rules="applicationFormRules"
          ref="applicationFormRef"
          label-position="top"
        >
          <el-row :gutter="20" type="flex">
            <el-col :span="12">
              <el-form-item label="任务ID" prop="taskID">
                <el-input class="userInput" disabled v-model="applicationForm.taskID" @change="getCreatorMessage">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务责任人" prop="taskOfficer">
                <el-input disabled class="userInput" v-model="applicationForm.taskOfficer"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" type="flex">
            <el-col :span="12">
              <el-form-item label="反馈ID" prop="feedID">
                <el-input
                  class="userInput"
                  disabled
                  v-model="applicationForm.feedID"
                  placeholder="请输入反馈ID"
                  @change="getCreatorMessage"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="反馈创建人" prop="createPerson">
                <el-input disabled class="userInput" v-model="applicationForm.createPerson"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" type="flex">
            <el-col :span="12">
              <el-form-item label="主负责人" prop="mainPrincipal">
                <el-select
                  @change="changeMater"
                  v-model="applicationForm.mainPrincipal"
                  filterable
                  clearable
                  style="width: 100%"
                >
                  <el-option
                    v-for="(items, ind) in otherPrincipalList"
                    :key="ind"
                    :label="items.displayName"
                    :value="items.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="其他负责人" prop="otherPriCipal">
                <el-select @change="selectIdChange" v-model="applicationForm.otherPriCipal" filterable clearable multiple style="width: 100%">
                  <el-option
                    v-for="(items, ind) in userList"
                    :key="ind"
                    :label="items.displayName"
                    :value="items.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" :gutter="20" style="margin-top: 18px">
            <el-col :span="12">
              <el-form-item class="isDing" prop="mettingTime" label="会议时间">
                <div class="questionDesc"></div>
                <el-radio-group v-model="applicationForm.mettingTime">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="每周三3点前可申请本周上会，否则只能申请下周，如需紧急上会，请联系管理员"
                    placement="top-start"
                  >
                    <el-radio :label="true" class="firstRadio" :disabled="selectThisWeek">
                      本周
                    </el-radio>
                  </el-tooltip>
                  <el-radio :label="false">下周</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item class="isDing" prop="isWill" label="是否继续上会">
                <div class="questionDesc"></div>
                <el-radio-group v-model="applicationForm.isWill">
                  <el-radio :label="true" class="firstRadio">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="24">
              <el-form-item label="本次会议讨论内容" class="applicationReason" prop="discussionContent">
                <el-input v-model="applicationForm.discussionContent" type="textarea" class="applicationReason"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #dialog_footer>
        <el-button class="submitCancel" @click="applicationCancel">取 消</el-button>
        <el-button type="primary" @click="confirmApplication" class="submitReme">申请</el-button>
      </template>
    </CommonDialog>
  </div>
</template>
<script>
import CommonDialog from '@/components/commonDialog/commonDialog.vue'
import { FeedBack } from '@/api/feedBack/server'
import { DelateMetting } from '@/api/delateMeeting/server'
export default {
    name: '',
    components: {
        CommonDialog
    },
    props: {},

    data() {
        // 工具栏配置
        return {
            userList: [],
            otherPrincipalList: [],
            // 控制申请上报弹出框的显示和隐藏
            applicationDialogVisible: false,
            // 是否可用本周
            selectThisWeek: true,
            tableItemsID: '',
            productID: '',
            // 申请上报弹出框表单内容
            applicationForm: {
                feedID: '',
                createPerson: '',
                mettingTime: '',
                isWill: true,
                mainPrincipal: '',
                otherPriCipal: '',
                discussionContent: '',
                taskID: '',
                taskOfficer: '',
                masterId: '',
                master: ''
            },

            // 申请弹出框
            applicationFormRules: {
                feedID: [
                    {
                        required: true,
                        message: '请输入反馈ID',
                        trigger: 'change'
                    }
                ],
                createPerson: [
                    {
                        required: true,
                        message: '请填写创建人',
                        trigger: 'change'
                    }
                ],
                mainPrincipal: [
                    {
                        required: true,
                        message: '请填写主负责人',
                        trigger: 'change'
                    }
                ],
                otherPriCipal: [
                    {
                        required: true,
                        message: '请填写其他负责人',
                        trigger: 'blur'
                    }
                ],
                discussionContent: [
                    {
                        required: true,
                        message: '请填写本次会议讨论内容',
                        trigger: 'change'
                    }
                ],
                mettingTime: [
                    {
                        required: true,
                        message: '请选择上会时间',
                        trigger: 'change'
                    }
                ],
                isWill: [
                    {
                        required: true,
                        message: '请选择是否上会',
                        trigger: 'change'
                    }
                ]
            },

            // 反馈ID
            feedBackNumber: '',
            taskId: '',
            setting: {
                branding: false,
                elementpath: false, // 隐藏元素路径，不明白的可以切换true/false观察页面
                statusbar: false,
                resize: false,
                menubar: false,
                toolbar:
          'undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
                toolbar_drawer: 'sliding',
                quickbars_selection_toolbar:
          'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
                plugins: 'link image  table lists fullscreen',
                language: 'zh_CN',
                init_instance_callback: editor => {
                    if (this.content) {
                        editor.setContent(this.content)
                    }
                    this.finishInit = true
                    editor.on('NodeChange Change SetContent KeyUp', () => {
                        this.hasChanged = true
                    })
                }, // 上传图片
                convert_urls: false,
                automatic_uploads: true, // 开启点击图片上传时，自动进行远程上传操作
                images_upload_base_path: `${process.env.VUE_APP_GOLDWIND_BASE_API}`, // 图片上传的基本路径
                images_upload_url: '/v2/file/upload',
                images_upload_handler: (blobInfo, success, failure) => {
                    var xhr, formData

                    xhr = new XMLHttpRequest()
                    xhr.withCredentials = false
                    xhr.open('POST', `${process.env.VUE_APP_GOLDWIND_BASE_API}` + '/v2/file/upload')
                    xhr.setRequestHeader('token', JSON.parse(sessionStorage.getItem('USERINFO')).token)
                    // xhr.setRequestHeader('token', JSON.parse(sessionStorage.getItem('USERINFO')).token);

                    formData = new FormData()
                    formData.append('file', blobInfo.blob())

                    formData.append('checkOfficeFmt', false)
                    formData.append('isTmp', false)
                    xhr.onload = function(e) {
                        var json
                        console.log(e, xhr)
                        console.log(this)

                        if (xhr.errcode == '0') {
                            failure('服务器错误:' + xhr.msg)
                            return
                        }
                        json = JSON.parse(this.responseText)
                        if (!json.data || typeof json.data.fileSourceId != 'string') {
                            failure('服务器错误')
                            return
                        }
                        success(
                            `${process.env.VUE_APP_GOLDWIND_BASE_API}` +
                '/v2/file/download?' +
                '&fileSourceId=' +
                json.data.fileSourceId
                        )
                    }
                    xhr.send(formData)
                },
                image_advtab: false,
                language_url: 'tinymce/langs/zh_CN.js', // 语言包的路径
                height: 200
            }
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        // 保存会议反馈弹出框
        selectIdChange(e) {
            const idArr = []
            this.userList.forEach((element) => {
                e.forEach((els) => {
                    if (element.id === els) {
                        idArr.push(element.displayName)
                    }
                })
            })
            this.applicationForm.otherPrincipalUserName = idArr
        },
        changeMater(e) {
            console.log(e)
            let names = ''
            this.otherPrincipalList.forEach(element => {
                if (element.id == e) {
                    names = element.displayName
                }
            })
            this.applicationForm.taskOfficer = names
        },
        /**
     * @description: 申请上会弹出框加载方法
     * @param {Object} _row 操作的当前行对象
     */
        show(_row) {
            const row = JSON.parse(_row)
            this.tableItemsID = row.id
            this.productID = row.productId
            this.feedBackNumber = row.feedBackId
            this.taskId = row.id

            this.applicationForm.feedID = row.feedBackId
            this.applicationForm.taskID = row.id
            console.log(row)
            this.applicationForm.taskOfficer = row.responsibleUserName
            this.applicationDialogVisible = true
            this.getCreatorMessage(_row.id)
            this.getUserList()
            this.getAllUserList()
        },
        async getAllUserList() {
            try {
                const result = await FeedBack.GetAllUserAsync()
                if (result.success) {
                    this.userList = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 取消申请上会
     */
        applicationCancel() {
            this.$refs['applicationFormRef'].resetFields()
            this.applicationDialogVisible = false
        },

        /**
     * @description: 申请上会弹出框传入子组件的更改
     * @param {Boolean} val 弹出框显示或者隐藏的bool值
     */
        applicationChange(val) {
            this.applicationDialogVisible = val
            this.$refs['applicationFormRef'].resetFields()
        },

        /**
     * @description: 确认上会
     */
        async confirmApplication() {
            this.$refs['applicationFormRef'].validate(valid => {
                if (valid) {
                    this.applicationApart()
                } else {
                    return false
                }
            })
        },

        /**
     * @description:上会方法
     */
        async applicationApart() {
            const NameArr = []
            const thats = this
            for (const itemI in this.applicationForm.otherPriCipal) {
                if (Object.hasOwnProperty.call(thats.applicationForm.otherPriCipal, itemI)) {
                    thats.otherPrincipalList.forEach(item => {
                        if (item.id == thats.applicationForm.otherPriCipal[itemI]) {
                            NameArr.push(item.displayName)
                        }
                    })
                }
            }
            const objparams = {
                continueMeetingTag: true,
                feedBackNumber: this.applicationForm.feedID,
                otherPrincipalUserId: this.applicationForm.otherPriCipal,
                discussionContent: this.applicationForm.discussionContent,
                thisWeek: this.applicationForm.mettingTime,
                taskNumber: this.applicationForm.taskID,
                otherPrincipalUserName: this.applicationForm.otherPrincipalUserName,
                masterId: this.applicationForm.mainPrincipal,
                masterName: this.applicationForm.taskOfficer
            }
            console.log(objparams)
            try {
                const result = await FeedBack.ApplyMeeting(objparams)
                if (result.success) {
                    this.applicationDialogVisible = false
                    this.$refs['applicationFormRef'].resetFields()
                    this.$emit('refreshPage')
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                console.log(err)
            }
        },
        /**
     * @description:获取其他负责人
     */
        async getUserList() {
            try {
                const result = await FeedBack.GetListItemAsync({ id: this.productID })
                if (result.success) {
                    this.otherPrincipalList = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },
        /**
     * @description: 获取表单相关字段信息
     */
        async getCreatorMessage() {
            const id = this.taskId
            this.applicationForm.createPerson = ''
            this.applicationForm.mainPrincipal = ''
            try {
                const result = await DelateMetting.GetTaskOverTime(id, false)
                if (result.success) {
                    console.log('11111111', result.data)
                    this.applicationForm.createPerson = result.data.createUser
                    this.applicationForm.mainPrincipal = result.data.responsibleUserId
                    this.applicationForm.taskOfficer = result.data.responsibleUserName
                    if (result.data.feedBackOverTimeDto) {
                        this.selectThisWeek = !result.data.feedBackOverTimeDto.selectThisWeek
                        if (!result.data.feedBackOverTimeDto.selectThisWeek) {
                            this.applicationForm.mettingTime = false
                        } else {
                            this.applicationForm.mettingTime = true
                        }
                    } else {
                        this.selectThisWeek = !result.data.selectThisWeek
                        if (!result.data.selectThisWeek) {
                            this.applicationForm.mettingTime = false
                        } else {
                            this.applicationForm.mettingTime = true
                        }
                    }
                } else {
                    this.$message.error('该反馈ID不存在')
                }
            } catch (err) {
                console.log(err)
            }
        }
    }
}
</script>

<style scoped lang="less">
::v-deep .applicationReason textarea {
  height: 200px;

  background: #ffffff;

  border: 1px solid #dadee0;

  border-radius: 2px;
}
::v-deep .application .el-dialog__header {
  width: 100% !important;
}
::v-deep .application .el-dialog__body {
  overflow: hidden;
}
::v-deep .application .el-dialog {
  border-radius: 5px;
  box-sizing: border-box;
}
</style>
<style scoped>
::v-deep .ql-editor li {
  list-style-type: decimal !important;
  list-style-position: inside !important;
}
::v-deep .ql-editor ul > li:before {
  content: '\2022';
}

::v-deep .ql-editor ul > li::marker {
  content: '';
  display: none;
}

::v-deep .ql-editor li:before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
</style>
